<template>
   <div class="topListDetail" :style="{height:widths+'rem'}">
    <van-skeleton :row="10" :loading="loading">
     <div class="recommend" v-if="title">{{title}}</div>
       <div class="wrapper" ref="wrapper">
         <div class="recomendList" ref="mount">
          <div class="recommendItem" v-for="(item,i) in recommendList" @click="toTopListDetail(item.id)" :key=i>
      <img :src="item.coverImgUrl" alt="">
      <div class="update">
        <p>{{item.updateFrequency}}</p>
      </div>
      <div class="title">{{item.name}}</div>
        <i class="iconfont icon-a4gl-play123"></i>  
          </div>
     </div>
       </div>
    </van-skeleton>
   </div>
</template>

<script>
import BScroll from 'better-scroll'
let wrapper = document.querySelector('.wrapper')
let scroll = new BScroll(wrapper)
export default {
 props:['recommendList','officalList','title','type'],
 data(){
   return{
    // loading:true
   }
 },
 mounted(){
   this.$nextTick(() => {
        //$refs绑定元素
        if(!this.scroll){
            this.scroll = new BScroll(this.$refs.wrapper, {
            //开启点击事件 默认为false
            click:true
        })
        // console.log(this.scroll)
        }else if(!this.$refs.wrapper){
            return
        }
        else{
            this.scroll.refresh()
        }
      })
 },
 computed:{
   widths(){
     let widths=0
     if(this.type===2){
          widths=5.5
       }else{
          widths=3.2
       }
       return widths
   },
   loading(){
     let loading  
     if(this.recommendList){
       loading=false
     }   
     return loading
   }
 },
 methods:{
   toTopListDetail(id){
     this.$router.push({path:'/toplistdetail',query:{id}})
   }
 }
}
</script>

<style lang="less" scoped>
html,body{
  -webkit-text-size-adjust:none;
}

.wrapper{
  width: 100%;
  overflow: hidden;
  z-index: 1;
}
.topListDetail{
  position: relative;
  border:1px solid #fff;
  border-radius: 0.2rem;
  width: 6.9rem;
  // height: 3.2rem;
  background-color: #fff;
  .recommend{
    position: absolute;
    left:0.2rem;
    top:0.2rem;
    height: 0.6rem;
    width: 100%;
    font-size:0.3rem;
    font-weight: 700;
  }
  .recomendList{
    width: 6.9rem;
    display: flex;
    align-items: center;
    flex-wrap:wrap;
    justify-content: space-around;
    position: absolute;
    padding:0 0.2rem;
    bottom:0.2rem;
    .recommendItem{
      position: relative;
      margin-top:0.1rem;
      img{
      width: 1.8rem;
      height: 1.8rem;
      border-radius: 0.2rem;
    }
    .title{
      width: 1.8rem;
      text-align: center;
      overflow:hidden; //超出的文本隐藏
      text-overflow:ellipsis; //溢出用省略号显示
      white-space:nowrap; 
      font-size:0.2rem;
    }
    .update{
      p{
       position: absolute;
       color:rgb(252, 243, 243);
       margin-right:0.05rem;
       // width: 1.2rem;
       height: 0.3rem;
       border-radius: 0.15rem;
       background-color: rgba(240,240,240,0.4);
       right:-0.1rem;
       top:0.1rem;
       text-align: center;
       line-height: 0.3rem;
       display: inline-box;
       width: 1.5rem;
       text-align: center;
       transform: scale(0.8); //缩放0.8倍
       font-size: 0.1rem;
      }
    }
    .iconfont{
      position: absolute;
      font-size:0.35rem;
      right:0.1rem;
      bottom:0.5rem;
      color:#ccc;
    }
    }
  }
}
</style>